<style scoped lang="less">
.exclusiveBroadcast {
  max-width: 800px;
  margin: 30px auto 0;
  &__title{
    font-size: 14px;
    color: #141B27;
    transition: color ease-in-out 300ms;
  }
  &__list{
    margin: 20px auto 0;
    display: flex;
    flex-flow: row nowrap;
    gap: 14px;
    box-sizing: border-box;
    border-radius: 10px;
    padding-bottom: 20px;
    &__item{
      flex-shrink: 0;
      box-sizing: content-box;
      position: relative;
      &__image{
        overflow: hidden;
        position: relative;
        border-radius: 10px;
        max-width: 400px;
        transition: all ease-in-out 300ms;
        &__image{
          width: 100%;
          height: 120px;
          object-fit: cover;
          display: block;
        }
        &:hover{
          box-shadow: 2px 2px 16px 5px rgba(0, 0, 0, 0.23);
        }
      }

      &__title{
        margin-top: 4px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
      &__play-button{
        position: absolute;
        width: 20px;
        height: 20px;
        bottom: 10px;
        left: 10px;
        border-radius: 50%;
        display: flex;
        justify-content: center;
        align-items: center;
        background: rgba(80, 80, 80, 0.32);
        &:active{
          .songList__list__item__play-button__icon{
            opacity: .6;
          }
        }
        &__icon{
          padding: 12px;
          width: 20px;
          display: block;
          transform: scale(0.5);
        }
      }
    }
  }
}
</style>
<template>
  <div class="exclusiveBroadcast">
    <div class="exclusiveBroadcast__title" >独家放送 ></div>
    <div class="exclusiveBroadcast__list" ref="exclusiveBroadcast">
      <div class="exclusiveBroadcast__list__item" v-for="(ele,index) of listCom" :key="index" @click="handleClick(ele)">
        <div class="exclusiveBroadcast__list__item__image">
          <img :src="ele.imageUrl" class="exclusiveBroadcast__list__item__image__image"/>
          <div class="exclusiveBroadcast__list__item__play-count">{{ ele.playCount }}</div>
          <div class="exclusiveBroadcast__list__item__play-button" @click="playMusic(ele)" >
            <img :src="playIcon" class="exclusiveBroadcast__list__item__play-button__icon">
          </div>
        </div>
        <div class="exclusiveBroadcast__list__item__title">{{ ele.title }}</div>
      </div>
    </div>
  </div>
  <ScrollBar :el="exclusiveBroadcast"></ScrollBar>
</template>

<script lang="ts" setup>
import ScrollBar from '@/components/scrollBar'
//@ts-ignore
import playIcon from '../../../icon/play-red.png'
import {computed, ref} from "vue";
import {AxiosService} from "@/core";
const axios = new AxiosService('netEasyMusic')
const exclusiveBroadcast = ref(null)
// 数据
const list:any = ref([])
const listCom = computed(() => list.value?.map((ele:any,index:number) => ({
  index,
  ...ele,
  imageUrl: ele?.picUrl,
  title: ele?.name
})))

// 请求
axios.get({
  api:'/personalized/privatecontent/list',
  params:{ limit:6 },
  success: ({result}) => list.value = result

})
// 交互
// 点击图片
const handleClick = (event:any) => {
  const { id } = event
}

</script>

